<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{color:red}
    </style>
</head>
<body>
  

    
    <p>文字</p>
    <p>文字2</p>
    <div>good</div>
    
<script>
// cookie storage localstorage 区别
// cookie 本身用于浏览器和server通讯
//  被“借用”到本地存储来
// 可用document.cookie ='' 来修改

//  最大存4kb
document.cookie='a=100;';
document.cookie='b=200;';
document.cookie='a=200;';

// cookie的缺点
// 存储大小,最大4KB
// http请求时需要发送到服务端,增加请求数据量
//  只能用document.cookie ='' 来修改，太过简陋


// localStorage和sessionStorage

// HTML5专门为存储而设计,最大可存5M
// API简单易用setItem getItem
// 不会随着http请求被发送出去

// localStorage和sessionStorage
// localStorage数据会永久存储,除非代码或手动删除
// sessionStorage数据只存在于当前会话,浏览器关闭则清空
// 般用localStorage会更多一些

// 描述cookie localStorage sessionStorage区别
// ◆容量
// ◆API易用性
// ◆是否跟随http请求发送出去




 

</script>
</body>
</html>